<template>
  <div class="mail-compose-page">
    <div class="mail-compose-draft">
      <div class="mail-compose-header">
        <div class="xmail-ui-ellipsis-toolbar">
          <div class="ui-ellipsis-toolbar-btns">
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-blue-lighten"
              @click="sendEmail"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i width="20" height="20" fill="currentColor">➥</i>
              </span>
              <div class="ui-btn-text">发送</div>
            </div>
            <div
              class="xmail-ui-btn ui-btn-size32 ui-btn-border ui-btn-them-clear-gray"
              style="margin-right: 8px"
            >
              <span
                class="xmail-ui-icon ui-btn-icon"
                style="width: 20px; height: 20px"
              >
                <i width="20" height="20" fill="currentColor">📃</i>
              </span>
              <div class="ui-btn-text">预览</div>
            </div>
          </div>

          <div class="ui-ellipsis-toolbar-more" style="width: 0px"></div>
        </div>

        <div class="mail-compose-save-tips">
          <span></span>
        </div>

        <div
          class="mail-compose-header-right compose-header-right-show-sidebar"
        >
          <div class="btn-divider"></div>
          <div
            class="xmail-ui-btn ui-btn-size32 ui-btn-them-clear-gray ui-btn-only-icon close-btn"
            style="margin-left: 8px"
          >
            <span
              class="xmail-ui-icon ui-btn-icon"
              style="width: 20px; height: 20px"
            >
              <i width="20" height="20" fill="currentColor"></i>
            </span>
          </div>
        </div>
      </div>

      <div class="compose-draft-body">
        <div class="compose-draft-body-left">
          <div class="xmail-ui-float-scroll">
            <div
              class="ui-float-scroll-body compose-draft-content-scroll"
              tabindex="0"
            >
              <div tabindex="0" class="mail-compose-receivers">
                <div class="receiver-editor-wrap">
                  <div
                    class="mail-compose-input-name compose-input-name-clickable"
                  >
                    <div class="name-text">
                      <span>收件人id</span>
                    </div>
                  </div>
                  <div
                    class="xmail-cmp-accounts-editor receiver-editor"
                    @input="handleInput"
                  >
                    <input
                      v-model="recipient_phone_number"
                      type="text"
                      maxlength="500"
                    />
                  </div>
                  <!-- <div class="receiver-btns"></div> -->
                </div>
              </div>
              <div class="mail-compose-subject">
                <div class="mail-compose-input-name">
                  <div class="name-text">
                    <span>主题</span>
                  </div>
                </div>
                <input
                  type="text"
                  v-model="subject"
                  placeholder="主题"
                  maxlength="255"
                />
              </div>
              <div class="mail-compose-mail-content-editor show-format-bar">
                <div class="toolbar-wrap">
                  <!-- <div
                    class="mail-compose-content-toolbar editor-toolbar"
                  >
                  <div class="xmail-ui-ellipsis-toolbar">
                    
                  </div>
                  <div class="toolbar-right-wrap"></div>
                </div> -->

                  <div
                    class="mail-compose-content-toolbar editor-format-bar"
                  ></div>
                </div>

                <div class="toolbar-border-bottom-cover"></div>

                <div class="mail-content-editor-wrap">
                  <div
                    class="xmail-cmp-xmail-editor mail-content-editor"
                    contenteditable="true"
                    ref="contentEditor"
                    @input="updateContent"
                    style="
                      user-select: text;
                      color: rgb(0, 0, 0);
                      background-color: rgb(255, 255, 255);
                    "
                  >
                    <!-- <div
                      style="
                        font-family: -apple-system, system-ui;
                        font-size: 14px;
                        color: rgb(0, 0, 0);
                      "
                    >
                      <span style="line-height: 1.6">
                        <br />
                      </span>
                    </div> -->
                  </div>
                  <div class="mail-compose-attaches">
                    <input class="attach-file-input" type="file" multiple />
                    <div class="mail-compose-attaches"></div>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="xmail-ui-float-scroll-bar ui-float-scroll-bar-vertical ui-float-scroll-bar-disabled draft-vertical-scroll-bar"
            ></div>
          </div>

          <div
            class="xmail-ui-float-scroll-bar ui-float-scroll-bar-horizontal ui-float-scroll-bar-disabled draft-horiz-scroll-bar"
          ></div>

          <div class="draft-body-attaches-float-bar-wrap"></div>

          <!-- <div class="mail-compose-footer"></div> -->
        </div>
        <div class="compose-draft-body-right"></div>
      </div>

      <div class="mail-compose-file-drop-zone"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import axios from "axios";

export default defineComponent({
  setup() {
    const sender_id = ref<number | null>(null);
    const recipient_id = ref("");
    // 收件人电话号码
    const recipient_phone_number = ref("");

    const subject = ref("");
    const content = ref("");
    const contentEditor = ref<HTMLElement | null>(null);

    const userInfoStr = localStorage.getItem("userInfo");
    if (userInfoStr) {
      const userInfo = JSON.parse(userInfoStr);
      sender_id.value = userInfo.id;
    }

    const updateContent = (event: any) => {
      // 处理正文输入框的输入事件
      content.value = event.target.innerHTML || "";
    };

    const handleInput = (event: Event) => {
      const target = event.target as HTMLInputElement;
      recipient_id.value = target.value;
    };

    const sendEmail = async () => {
      try {
        const response = await axios.post(
          "http://localhost:3000/api/send-email",
          {
            sender_id: sender_id.value,
            recipient_id: recipient_id.value, // 确保传递 recipient_id
            recipient_phone_number: recipient_phone_number.value,
            subject: subject.value,
            content: content.value,
          }
        );

        if (response.data.success) {
          console.log("邮件发送成功");
          recipient_id.value = "";
          subject.value = "";
          content.value = "";
          if (contentEditor.value) {
            contentEditor.value.innerHTML = "";
          }
        } else {
          console.error("邮件发送失败", response.data.message);
        }
      } catch (error) {
        if (axios.isAxiosError(error)) {
          console.error("Axios 错误:", error.message);
          console.error("错误响应:", error.response);
        } else {
          console.error("未知错误:", error);
        }
      }
    };

    onMounted(() => {
      if (contentEditor.value) {
        contentEditor.value.innerHTML = content.value;
      }
    });

    return {
      recipient_phone_number,
      sender_id,
      recipient_id,
      subject,
      content,
      handleInput,
      updateContent,
      sendEmail,
      contentEditor,
    };
  },
});
</script>

<style scoped>
.mail-compose-page {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg_white_web);
  overflow: hidden;
}

.mail-compose-draft {
  --compose-draft-padding-lr: 24px;
  --compose-header-height: 48px;
  --compose-footer-height: 48px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-compose-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: var(--compose-header-height);
  padding: 0 24px;
  box-sizing: border-box;
}

.xmail-ui-ellipsis-toolbar {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.xmail-ui-ellipsis-toolbar .ui-ellipsis-toolbar-btns {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-blue-lighten {
  --front-bg: var(--theme_lighten_5);
  --hover-front-bg: var(--theme_lighten_4l);
  --active-front-bg: var(--theme_lighten_4);
  --color: var(--theme_darken_1);
  --icon-color: var(--theme_darken_1);
  --border-color: var(--theme_lighten_4);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xmail-ui-btn .ui-btn-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn.ui-btn-border {
  --border-width: 1px;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.mail-compose-header-right.compose-header-right-show-sidebar {
  width: 221px;
  padding-left: 0;
}

.mail-compose-header-right {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 8px;
}

.mail-compose-header-right .btn-divider {
  width: 1px;
  height: 16px;
  background: var(--base_gray_007);
  margin-left: 8px;
}

.xmail-ui-btn.ui-btn-size32.ui-btn-only-icon {
  padding: 0 calc(6px - var(--border-width));
}

.mail-compose-header-right .close-btn {
  position: relative;
  z-index: 4;
}

.xmail-ui-btn.ui-btn-size32 {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  min-width: 32px;
  padding: 0 calc(8px - var(--border-width));
  border-radius: 4px;
}

.xmail-ui-btn.ui-btn-them-clear-gray {
  --border-color: var(--base_gray_010);
}

.xmail-ui-btn {
  --base-bg: transparent;
  --front-bg: transparent;
  --hover-front-bg: var(--base_gray_005);
  --active-front-bg: var(--base_gray_010);
  --color: var(--base_gray_100);
  --icon-color: var(--base_gray_080);
  --border-width: 0px;
  --border-color: transparent;
  --icon-margin: 4px;
  --shadow: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  box-sizing: border-box;
  background: var(--base-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.xmail-ui-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--front-bg);
}

.xmail-ui-btn.ui-btn-only-icon .ui-btn-icon {
  margin-right: 0;
}

.xmail-ui-btn .ui-btn-icon {
  position: relative;
  color: var(--icon-color);
  margin-right: var(--icon-margin);
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 内容部分 */
.mail-compose-draft .compose-draft-body {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.mail-compose-draft .compose-draft-body .compose-draft-body-left {
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
}

.xmail-ui-float-scroll {
  flex-grow: 1;
  position: relative;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mail-compose-draft
  .compose-draft-body
  .compose-draft-body-left
  .compose-draft-content-scroll {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
  box-sizing: border-box;
}

.xmail-ui-float-scroll .ui-float-scroll-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-grow: 1;
  position: relative;
  overflow: auto;
}

.mail-compose-receivers {
  flex-shrink: 0;
  background: var(--base_white_100);
  padding: 0 var(--compose-draft-padding-lr);
  box-sizing: border-box;
}

.mail-compose-receivers .receiver-editor-wrap {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--base_gray_007);
  box-sizing: border-box;
}

.mail-compose-input-name.compose-input-name-clickable {
  cursor: pointer;
}

.mail-compose-input-name {
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--base_gray_100);
  height: 44px;
  line-height: 1;
  min-width: 87px;
  padding-right: 4px;
  box-sizing: border-box;
}

.mail-compose-input-name .name-text {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.mail-compose-input-name .add-icon {
  display: none;
}

.xmail-ui-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mail-compose-receivers .receiver-editor-wrap .receiver-editor {
  margin: 4px 0;
}

.xmail-cmp-accounts-editor {
  --border-color: transparent;
  --input-item-height: 30px;
  --input-item-paddingT: 4px;
  --input-cursor-offset: 4px;
  flex-grow: 1;
  align-self: stretch;
  cursor: text;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 100px;
  min-height: calc(var(--input-item-height) + var(--input-item-paddingT) + 2px);
  max-height: 104px;
  padding-left: var(--input-cursor-offset);
  border: 1px solid var(--border-color);
  padding-bottom: var(--input-item-paddingT);
  border-radius: 6px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.xmail-cmp-accounts-ellipsis {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  flex-grow: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.mail-compose-subject {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  background: var(--base_white_100);
  padding: 0 var(--compose-draft-padding-lr);
  box-sizing: border-box;
}

.mail-compose-input-name {
  font-size: 14px;
  line-height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--base_gray_100);
  height: 44px;
  line-height: 1;
  min-width: 87px;
  padding-right: 4px;
  box-sizing: border-box;
}

.mail-compose-input-name .name-text {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.mail-compose-subject .subject-input {
  font-size: 14px;
  line-height: 20px;
  flex-grow: 1;
  height: 100%;
  color: var(--base_gray_100);
  border: none;
  outline: none;
  padding: 0;
  margin-left: 4px;
  margin-right: 8px;
  background: transparent;
}

.mail-compose-mail-content-editor {
  --compose-toobar-height: 44px;
  --border-cover-top: calc(var(--compose-toobar-height) - 2px);
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.mail-compose-mail-content-editor .toolbar-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--base_white_100);
  padding: 0 var(--compose-draft-padding-lr);
  box-sizing: border-box;
}

.mail-compose-mail-content-editor .toolbar-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--base_white_100);
}

.mail-compose-mail-content-editor .editor-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: var(--compose-toobar-height);
  box-sizing: border-box;
}

.mail-compose-mail-content-editor .toolbar-wrap::after {
  content: "";
  position: absolute;
  left: var(--compose-draft-padding-lr);
  right: var(--compose-draft-padding-lr);
  bottom: 0;
  height: 1px;
  background: var(--base_gray_007);
}

.mail-compose-mail-content-editor .toolbar-border-bottom-cover {
  position: -webkit-sticky;
  position: sticky;
  top: var(--border-cover-top);
  z-index: 2;
  height: 1px;
  margin: -1px var(--compose-draft-padding-lr) 0 var(--compose-draft-padding-lr);
  background: var(--base_white_100);
}

.mail-compose-mail-content-editor .mail-content-editor-wrap {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--compose-draft-padding-lr);
  box-sizing: border-box;
}

.mail-compose-mail-content-editor
  .mail-content-editor-wrap
  .mail-content-editor {
  flex-grow: 1;
  padding: 10px;
  margin: 0 -10px;
  box-sizing: border-box;
  overflow: hidden;
}

.xmail-cmp-xmail-editor {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  position: relative;
  min-height: 45px;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  transform: translateZ(0);
}

#contentDiv_0::before {
  content: "";
  position: absolute;
  pointer-events: none;
  color: rgba(25, 41, 59, 0.4);
  font-size: 14px;
  font-family: -apple-system, system-ui;
}

.mail-compose-attaches {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.mail-compose-attaches .attach-file-input {
  display: none;
}

.mail-compose-attaches {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-disabled {
  pointer-events: none;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-vertical {
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
}

.xmail-ui-float-scroll-bar {
  position: absolute;
  z-index: 5;
  cursor: default;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.mail-compose-draft
  .compose-draft-body
  .compose-draft-body-left
  .draft-horiz-scroll-bar {
  left: var(--compose-draft-padding-lr);
  right: var(--compose-draft-padding-lr);
  bottom: var(--compose-footer-height) !important;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-disabled {
  pointer-events: none;
}

.xmail-ui-float-scroll-bar.ui-float-scroll-bar-horizontal {
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
}

.xmail-ui-float-scroll-bar {
  position: absolute;
  z-index: 5;
  cursor: default;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.mail-compose-draft
  .compose-draft-body
  .compose-draft-body-left
  .draft-body-attaches-float-bar-wrap {
  position: absolute;
  left: 24px;
  bottom: var(--compose-footer-height);
}

.mail-compose-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: var(--compose-footer-height);
  padding: 0 24px;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
